<template>
<!--    <div style="background: rgb(241,245,247)">-->
    <div>
        <el-card>
            <el-row>
                <el-col :span="6">
                    <div class="kuang">
                        <div>
                            总群数:<span>{{groupStatist.chatTotal}}</span>
                        </div>
                        <div class="foot">
                            昨日新增:<span>{{groupStatist.newChatCnt}}</span><br>
                            昨日注销:<span>{{groupStatist.deleteCnt}}</span>
                        </div>
                    </div>
                </el-col>

                <el-col :span="6">
                    <div class="kuang">
                        <div>
                            群客户总数:<span>{{groupStatist.memberTotal}}</span>
                        </div>
                        <div class="foot">
                            昨日入群:<span>{{groupStatist.newMemberCnt}}</span><br>
                            昨日退群:<span>{{groupStatist.quitCnt}}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <div class="interspaceH"></div>
        <el-card>
            <div slot="header" class="clearfix">
                <div style="float: left; padding: 3px 0">
                    <el-radio-group v-model="activeName" style="margin-bottom: 30px;" size="small" @change="productRadioChange">
                        <el-radio-button label="1">群聊趋势</el-radio-button>
                        <el-radio-button label="2">群人员趋势</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div style="min-height:240px;">
                <div style="flex: 15;height: 100%" v-show="activeName=='1'">
                    <div style="width: 100%;height: 240px;" ref="lineChart1"></div>
                </div>
                <div style="flex: 15;height: 100%" v-show="activeName=='2'">
                    <div style="flex: 15;width: 100%;height: 240px;" ref="lineChart2"></div>
                </div>
            </div>
        </el-card>

        <div class="interspaceH"></div>
        <el-card class="box-card">
            <h4  style="margin-block-start: 0.33em;">群聊统计明细(天)</h4>
            <!-- 搜索框 -->
            <el-row class="user-search">
                <el-col :span="19">
                    <el-date-picker v-model="dateValue" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small">
                    </el-date-picker>
                    <el-button size="small" type="primary" @click="search">查询</el-button>
                    <el-button size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <!-- 列表 -->
            <el-table size="small" :data="listData" style="width: 100%; margin-top: 20px;">
                <el-table-column align="center" type="selection" width="60">
                </el-table-column>
                <el-table-column prop="statTime" label="日期" width="200">
                </el-table-column>
                <el-table-column prop="chatTotal" label="群聊总数" width="200">
                </el-table-column>
                <el-table-column prop="newChatCnt" label="新增群聊数" width="200">
                </el-table-column>
                <el-table-column prop="chatHasMsg" label="活跃群数" width="200">
                </el-table-column>
                <el-table-column prop="memberTotal" label="群总人数" width="200">
                </el-table-column>
                <el-table-column prop="newMemberCnt" label="入群人数" width="200">
                </el-table-column>
                <el-table-column prop="memberHasMsg" label="活跃人数" width="200">
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pagePagination.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                activeName: '1',
                dateValue: '',
                listData:[],
                groupStatist:{
                    chatTotal:0,
                    newChatCnt:0,
                    deleteCnt:0,
                    memberTotal:0,
                    newMemberCnt:0,
                    quitCnt:0
                },


                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
            }
        },

        // 注册组件
        components: {},

        mounted() {
            this.queryDataHandle()
        },

        methods: {
            aa() {
                let result = []
                for (let i = 7; i >=1; i--) {
                    result.push(this.$moment().subtract(i, "days").format("YYYY-MM-DD"))
                }
                return result
            },
            queryDataHandle() {
                let payData = [this.aa()[0],this.aa()[6]]
                this.$request("/api/custGroup/groupStatistics/1_0", payData, "POST").then((data) => {
                    this.listData = data.rows
                    this.groupStatist = data.rows[6]
                }).then(() =>{
                    this.initLineChart1(this.$refs.lineChart1)
                })

            },

            search(){
                let payData = [this.dateValue,this.dateValue]
                this.$request("/api/custGroup/groupStatistics/1_0", payData, "POST").then((data) => {
                    this.listData = data.rows
                })
            },
            reset(){
                this.dateValue = ''
            },
            productRadioChange(e){
                this.activeName = e
                if (e == '1') {
                    this.initLineChart1(this.$refs.lineChart1)
                } else {
                    this.initLineChart2(this.$refs.lineChart2)
                }
            },

            getNum(num) {
                return Math.floor(Math.random() * num) + 1;
            },
            initLineChart1(ref) {
                let random1 = [];
                let random2 = [];
                for (let i = 0; i < 7; i++) {
                    random1.push(this.listData[i].newChatCnt)
                    random2.push(this.listData[i].deleteCnt)
                }
                this.chart = this.$echarts.init(ref)
                let dateData = this.aa()
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        top: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '建群',
                            type: 'line',
                            data: random1
                        },
                        {
                            name: '注销',
                            type: 'line',
                            data: random2
                        }
                    ]
                };
                this.chart.setOption(option)
            },
            initLineChart2(ref) {
                var random1 = [];
                var random2 = [];
                for (let i = 0; i < 7; i++) {
                    random1.push(this.listData[i].newMemberCnt)
                    random2.push(this.listData[i].quitCnt)
                }
                this.chart = this.$echarts.init(ref)
                let dateData = this.aa()

                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        top: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '入群',
                            type: 'line',
                            data: random1
                        },
                        {
                            name: '退群',
                            type: 'line',
                            data: random2
                        }
                    ]
                };
                this.chart.setOption(option)
            },
        }
    }
</script>

<style scoped>
    .el-row {
        padding-left: 15px;
    }

    .kuang {
        background: #fff;
        width: 90%;
        font-size: 18px;
    }

    .kuang div span {
        line-height: 30px;
    }

    .foot {
        color: #999;
        border-top: 2px solid #F6F6F6;
        font-size: 16px;
    }

    .tubiao {
        background: #fff;
    }

    .el-link {
        margin: 0 20px;
    }
</style>
